<!--
 * @Description: 
 * @Author: dh
 * @Date: 2022-01-24 15:15:33
 * @LastEditors: dh
 * @LastEditTime: 2022-01-24 15:15:52
-->
<style>
	svg path {
		stroke: #000;
		fill: transparent;
	}
</style>

<svg width="430" height="430">
	<!-- 指令M/L - 画路径 -->
	<!-- 大写 == 绝对位置
     小写 == 相对位置 -->
	<path d="M 50 50 L 150 50 150 150 50 150"></path>
	<path d="M 50 160 l 100 0 0 100 -100 0"></path>

	<!-- 指令H/V - 水平/竖直 -->
	<!-- 大写 == 绝对位置
     小写 == 相对位置 -->
	<!-- 指令Z - 闭合路径(不区分大小写) -->
	<path d="M 200 50 h100 v100 z"></path>

	<!-- 指令A - 画圆弧(七个参数) -->
	<!-- rx ry --- 圆弧的x轴半径和y轴半径
     x-axis-rotation --- 圆弧相对x轴的旋转角度(默认是顺时针)
     large-arc-flag --- 选择大圆弧1/小圆弧0
     sweep-flag --- 顺时针1/逆时针0
     x/y 表示终点坐标，绝对/相对 -->
	<path d="M 100 100 a 50 50 0 1 1 50 50"></path>

	<!-- 指令Q - 2次贝塞尔曲线 -->
	<path d="M 50 50 q 100 0 100 100"></path>
	<!-- 指令T - 拓展方法 -->
	<path d="M 150 50 q 100 0 100 100 t 100 100"></path>

	<!-- 指令C - 3次贝塞尔曲线 -->
	<path d="M 50 50 c 100 0 0 100 100 100"></path>
	<!-- 指令S - 3次贝塞尔曲线(拓展方法) -->
	<path d="M 150 50 c 100 0 0 100 100 100 s 0 100"></path>
</svg>
